<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="汽车品牌" prop="brand">

        <el-select v-model="queryParams.brand"  filterable placeholder="请选择汽车品牌" @change="handleQueryy">
						<el-option-group v-for="group in brands" :key="group.label" :label="group.label">
							<el-option v-for="item in group.options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-option-group>
					</el-select>

      </el-form-item>
      <el-form-item label="车型" prop="model">
        <el-select filterable v-model="queryParams.model" placeholder="请选择车型" @change="handleQueryzz">
          <el-option v-for="model, key in models" :key="key" :label="model" :value="model"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色名称" prop="colorName">
        <el-select filterable v-model="queryParams.colorName" placeholder="请选择颜色名称" @change="handleQuerycc">
          <el-option v-for="color, key in colors" :key="key" :label="color" :value="color"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="油漆品牌" prop="paintBrand">
        <el-select filterable v-model="queryParams.paintBrand" placeholder="请选择油漆品牌" @change="handleQuery">
          <el-option v-for="paintBrand, key in paintBrands" :key="key" :label="paintBrand"
            :value="paintBrand"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="汽车收藏" prop="paintBrand">
    <el-select filterable v-model="queryParams.sort" placeholder="请选择汽车收藏" @change="handleQuery">
      <el-option
        v-for="item in sortData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['paint:cars:add']">新增</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['paint:cars:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportJiBen"
          v-hasPermi="['paint:cars:export']">导出基本信息</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['paint:cxcar:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          v-hasPermi="['system:user:import']">导入</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="carsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="汽车品牌" align="center" prop="brand" />
      <el-table-column label="车型" align="center" prop="model" />
      <el-table-column label="颜色名称" align="center" prop="colorName" />
      <el-table-column label="年款" align="center" prop="year" />
      <el-table-column label="油漆品牌" align="center" prop="paintBrand" />
      <el-table-column label="汽车图片链接" align="center" prop="imageUrl" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.imageUrl" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="配方详情" align="center" prop="imageUrl" width="100">
        <template slot-scope="scope">
          <div style="color: #46A6FF;" @click="handleDetailsClick(scope.row.id)">查看|计算</div>
        </template>
      </el-table-column>
      <el-table-column label="收藏" align="center" prop="sort" width="100">
        <template slot-scope="scope">
          <img src="../../../assets/xin/heart.png" @click="xinOngerf(scope.row.id,scope.row.sort)" alt="" style="width: 25px;" v-if="scope.row.sort === 2">
          <img src="../../../assets/xin/heartRed.png" @click="xinOngerf(scope.row.id,scope.row.sort)" style="width: 25px;" alt="" v-if="scope.row.sort === 1">

        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['paint:cars:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['paint:cars:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改汽车信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="汽车品牌" prop="brand">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.brand" placeholder="请输入汽车品牌" />
            <el-button type="" @click="innerVisible = true"
              style="width: 20%;  margin-left: 10px; height: 100%;">查找</el-button>
          </div>
        </el-form-item>

        <el-dialog width="30%" title="汽车品牌" :visible.sync="innerVisible" append-to-body>

          <el-select v-model="form.brand"  filterable placeholder="请选择汽车品牌" @change="handleQueryNei">
						<el-option-group v-for="group in brands" :key="group.label" :label="group.label">
							<el-option v-for="item in group.options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-option-group>
					</el-select>

        </el-dialog>

        <el-form-item label="车型" prop="model">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.model" placeholder="请输入车型" />
            <el-button @click="innerVisibleModel = true" type=""
              style="width: 20%;  margin-left: 10px; height: 100%;">查找</el-button>
          </div>
        </el-form-item>

        <el-dialog width="30%" title="车型" :visible.sync="innerVisibleModel" append-to-body>
          <el-form-item label="车型" prop="model">
            <el-select filterable v-model="form.model" placeholder="请选择车型" @change="handlColorNei">
              <el-option v-for="model, key in modelsN" :key="key" :label="model" :value="model"></el-option>
            </el-select>
          </el-form-item>
        </el-dialog>

        <el-form-item label="颜色名称" prop="colorName">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.colorName" placeholder="请输入颜色名称" />
            <el-button @click="innerVisibleColorName = true" type=""
              style="width: 20%;  margin-left: 10px; height: 100%;">查找</el-button>
          </div>
        </el-form-item>
        <el-dialog width="30%" title="颜色名称" :visible.sync="innerVisibleColorName" append-to-body>
          <el-form-item label="颜色名称" prop="colorName">
            <el-select filterable v-model="form.colorName" placeholder="请选择颜色名称">
              <el-option v-for="color, key in colors" :key="key" :label="color" :value="color"></el-option>
            </el-select>
          </el-form-item>
        </el-dialog>

        <el-form-item label="年款">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.year" placeholder="请输入数字" />
            <div @click="innerVisibleColorName = true" type="" style="width: 20%;  margin-left: 10px; height: 100%;">
            </div>
          </div>
        </el-form-item>
        <el-form-item label="油漆品牌" prop="paintBrand">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.paintBrand" placeholder="请输入油漆品牌" />
            <el-button @click="innerVisiblePaintBrand = true" type=""
              style="width: 20%;  margin-left: 10px; height: 100%;">查找</el-button>
          </div>
        </el-form-item>
        <el-dialog width="30%" title="油漆品牌" :visible.sync="innerVisiblePaintBrand" append-to-body>
          <el-form-item label="油漆品牌" prop="paintBrand">
            <el-select filterable v-model="form.paintBrand" placeholder="请选择油漆品牌" @change="handleQuery">
              <el-option v-for="paintBrand, key in paintBrands" :key="key" :label="paintBrand"
                :value="paintBrand"></el-option>
            </el-select>
          </el-form-item>
        </el-dialog>

        <el-form-item label="原厂色号">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.originalColorCode" placeholder="请输入原厂色号" />
            <div @click="innerVisibleColorName = true" type="" style="width: 20%;  margin-left: 10px; height: 100%;">
            </div>
          </div>
        </el-form-item>


        <el-form-item label="汽车图片链接" prop="imageUrl">
          <image-upload v-model="memeImageUrl" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>

        <h3 style="color: blue">配色方案</h3>
        <div>
          <h4 style="color: blue">配色方案一</h4>
          <div class="table-container">
            <div class="custom-header">
              <span class="header-item">底色</span>
            </div>
            <div>
              <el-button @click="addRow" style=" ">+</el-button>
              <el-button @click="subRow" style=" ">-</el-button>
            </div>
            <el-table :data="bottomDetailsOne" ref="myTable">
              <el-table-column prop="seq" label="序号">
                <template #default="{ row }">
                  <el-input v-model="row.seq" type="text" />
                </template>
              </el-table-column>
              <el-table-column prop="code" label="色母代号">
                <template #default="{ row }">
                  <el-input v-model="row.code" type="text" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="色母名称">
                <template #default="{ row }">
                  <el-input v-model="row.name" type="text" />
                </template>
              </el-table-column>

              <!-- <el-table-column prop="weight" label="净重(g)">
                <template #default="{ row }">
                  <el-input v-model="row.weight" type="text" />
                </template>
              </el-table-column> -->

              <el-table-column prop="weight" label="净重(g)">
                <template #default="{ row }">
                  <el-input v-model="row.weight" type="number" @change="validateWeight(row)" />
                </template>
              </el-table-column>

              <el-table-column prop="cumulativeWeight" label="累加量(g)">
                <template #default="{ row }">
                  <el-input v-model="row.cumulativeWeight" type="text" />
                </template>
              </el-table-column>
            </el-table>
            <div style="font-weight: bold;">
              合计:{{ hejiOne1 }}(g)
            </div>
          </div>

          <div class="table-container">
            <div class="custom-header2">
              <span class="header-item">面色</span>
            </div>
            <div>
              <el-button @click="addCol" style=" ">+</el-button>
              <el-button @click="subCol" style=" ">-</el-button>
            </div>
            <el-table :data="surfaceDetailsOne" ref="myTable">
              <el-table-column prop="seq" label="序号">
                <template #default="{ row }">
                  <el-input v-model="row.seq" type="text" />
                </template>
              </el-table-column>
              <el-table-column prop="code" label="色母代号">
                <template #default="{ row }">
                  <el-input v-model="row.code" type="text" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="色母名称">
                <template #default="{ row }">
                  <el-input v-model="row.name" type="text" />
                </template>
              </el-table-column>

              <el-table-column prop="weight" label="净重(g)">
                <template #default="{ row }">
                  <el-input v-model.lazy="row.weight" type="number" @change="validateWeight(row)" />
                </template>
              </el-table-column>


              <el-table-column prop="cumulativeWeight" label="累加量(g)">
                <template #default="{ row }">
                  <el-input v-model="row.cumulativeWeight" type="text" />
                </template>
              </el-table-column>
            </el-table>
            <div style="font-weight: bold;">
              合计:{{ hejiOne2 }}(g)
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px;">
            <div style="white-space: nowrap;">说明:</div>
            <el-input type="textarea" placeholder="请输入内容" v-model="remark1"></el-input>
          </div>
        </div>

        <div>
          <h4 style="color: blue">配色方案二<el-button @click="fanShow" style="margin-left: 10px;">{{ shuju }}</el-button>
          </h4>
          <div v-show="fangShow">
            <div class="table-container">
              <div class="custom-header">
                <span class="header-item">底色</span>
              </div>
              <div>
                <el-button @click="addRow1" style=" ">+</el-button>
                <el-button @click="subRow1" style=" ">-</el-button>
              </div>
              <el-table :data="bottomDetailsTwo" ref="myTable">
                <el-table-column prop="seq" label="序号">
                  <template #default="{ row }">
                    <el-input v-model="row.seq" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="色母代号">
                  <template #default="{ row }">
                    <el-input v-model="row.code" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="色母名称">
                  <template #default="{ row }">
                    <el-input v-model="row.name" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="净重(g)">
                  <template #default="{ row }">
                    <el-input v-model="row.weight" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="cumulativeWeight" label="累加量(g)">
                  <template #default="{ row }">
                    <el-input v-model="row.cumulativeWeight" type="text" />
                  </template>
                </el-table-column>
              </el-table>
              <div style="font-weight: bold;">
                合计:{{ hejiTwo1 }}(g)
              </div>

            </div>

            <div class="table-container">
              <div class="custom-header2">
                <span class="header-item">面色</span>
              </div>
              <div>
                <el-button @click="addCol1" style=" ">+</el-button>
                <el-button @click="subCol1" style=" ">-</el-button>
              </div>
              <el-table :data="surfaceDetailsTwo" ref="myTable">
                <el-table-column prop="seq" label="序号">
                  <template #default="{ row }">
                    <el-input v-model="row.seq" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="色母代号">
                  <template #default="{ row }">
                    <el-input v-model="row.code" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="色母名称">
                  <template #default="{ row }">
                    <el-input v-model="row.name" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="净重(g)">
                  <template #default="{ row }">
                    <el-input v-model="row.weight" type="text" />
                  </template>
                </el-table-column>
                <el-table-column prop="cumulativeWeight" label="累加量(g)">
                  <template #default="{ row }">
                    <el-input v-model="row.cumulativeWeight" type="text" />
                  </template>
                </el-table-column>
              </el-table>
              <div style="font-weight: bold;">
                合计:{{ hejiTwo2 }}(g)
              </div>
            </div>
            <div style="display: flex; align-items: center; margin-top: 20px;">
              <div style="white-space: nowrap;">说明:</div>
              <el-input type="textarea" placeholder="请输入内容" v-model="remark2"></el-input>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="配方详情" :visible.sync="dialogTableVisible" @close="handleCloseDialog">
      <el-row>
        <!-- 左侧汽车信息 -->
        <el-col :span="12">
          <el-descriptions :column="1">
            <el-descriptions-item label="汽车品牌">{{ corslist.brand }}</el-descriptions-item>
            <el-descriptions-item label="汽车车型">{{ corslist.model }}</el-descriptions-item>
            <el-descriptions-item label="颜色名称">{{ corslist.colorName }}</el-descriptions-item>
            <el-descriptions-item label="汽车年款">{{ corslist.year }}</el-descriptions-item>
            <el-descriptions-item label="油漆品牌">{{ corslist.paintBrand }}</el-descriptions-item>
            <el-descriptions-item label="汽车备注">{{ corslist.remark || '无' }}</el-descriptions-item>
          </el-descriptions>
        </el-col>

        <!-- 右侧图片展示 -->
        <el-col :span="12" style="text-align: center;">
          <!-- <img :src="'http://192.168.25.17:8080' + corslist.imageUrl" alt="汽车图片" style="max-width: 100%; height: auto;"> -->
          <el-col :span="12" style="text-align: center;">
            <img v-for="(imageUrl, index) in corslist.imageUrl" :key="index" :src="imageUrl" alt="汽车图片"
              style="max-width: 250px; height: auto;">
          </el-col>
        </el-col>
        <!-- <el-col :span="12" style="text-align: center;">
          <img v-for="(image, index) in corslist.imageUrl" :key="index" :src="`${baseURL}${image}`" alt="汽车图片"
            style="max-width: 100%; height: auto;">
        </el-col> -->
      </el-row>

      <!-- 如果需要保留表格形式展示其他数据，请根据实际情况调整 -->
      <h3 style="color: blue">配色方案</h3>
      <div v-show="gridData.length !== 0">
        <h4 style="color: blue">{{ gridData.title }}</h4>
        <div class="table-container">
          <div class="custom-header" v-if="mianse.length > 0">
            <span class="header-item">底色</span>
          </div>
          <el-table :data="dise" ref="myTable">
            <el-table-column property="seq" label="序号" width="50"></el-table-column>
            <el-table-column property="code" label="色母代号" width="150"></el-table-column>
            <el-table-column property="name" label="色母名称" width="150"></el-table-column>
            <el-table-column property="weight" label="净重(g)" width="150"></el-table-column>
            <el-table-column property="cumulative" label="累加量(g)"></el-table-column>
          </el-table>
          <div style="font-weight: bold;">
            合计:{{ formulaWeightDiHe }}(g)
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px;">
            <div>配方分量</div>
            <input type="text" style="margin: 0 5px;" v-model="formulaWeightDi">(g)

            <button style="margin-left: 30px;" @click="peisefangan()">计算</button>
          </div>

        </div>

        <div class="table-container" v-if="mianse.length > 0">
          <div class="custom-header2">
            <span class="header-item">面色</span>
          </div>
          <el-table :data="mianse" ref="myTable">
            <el-table-column property="seq" label="序号" width="50"></el-table-column>
            <el-table-column property="code" label="色母代号" width="150"></el-table-column>
            <el-table-column property="name" label="色母名称" width="150"></el-table-column>
            <el-table-column property="weight" label="净重(g)" width="150"></el-table-column>
            <el-table-column property="cumulative" label="累加量(g)"></el-table-column>
          </el-table>
          <div style="font-weight: bold;">
            合计:{{ formulaWeightMianHe }}(g)
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px;">
            <div>配方分量</div>
            <input type="text" style="margin: 0 5px;" v-model="formulaWeightMian">(g)
            <button style="margin-left: 30px;" @click="peisefangan">计算</button>
          </div>
        </div>
        <div style="font-weight: bold;margin-top: 20px">
            说明:{{ remark1 || '无'}}
          </div>

      </div>

      <div>
        <h4 style="color: blue">{{ gridData2.title }}</h4>
        <div class="table-container">
          <div class="custom-header" v-if="mianse2.length > 0">
            <span class="header-item">底色</span>
          </div>
          <el-table :data="dise2" ref="myTable">
            <el-table-column property="seq" label="序号" width="50"></el-table-column>
            <el-table-column property="code" label="色母代号" width="150"></el-table-column>
            <el-table-column property="name" label="色母名称" width="150"></el-table-column>
            <el-table-column property="weight" label="净重(g)" width="150"></el-table-column>
            <el-table-column property="cumulative" label="累加量(g)"></el-table-column>
          </el-table>
          <div style="font-weight: bold;">
            合计:{{ formulaWeightDi2He }}(g)
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px;">
            <div>配方分量</div>
            <input type="text" style="margin: 0 5px;" v-model="formulaWeightDi2">(g)
            <button style="margin-left: 30px;" @click="peisefangan2">计算</button>
          </div>

        </div>

        <div class="table-container" v-if="mianse2.length > 0">
          <div class="custom-header2">
            <span class="header-item">面色</span>
          </div>
          <el-table :data="mianse2" ref="myTable">
            <el-table-column property="seq" label="序号" width="50"></el-table-column>
            <el-table-column property="code" label="色母代号" width="150"></el-table-column>
            <el-table-column property="name" label="色母名称" width="150"></el-table-column>
            <el-table-column property="weight" label="净重(g)" width="150"></el-table-column>
            <el-table-column property="cumulative" label="累加量(g)"></el-table-column>
          </el-table>
          <div style="font-weight: bold;">
            合计:{{ formulaWeightMian2He }}(g)
          </div>
          <div style="display: flex; align-items: center; margin-top: 20px;">
            <div>配方分量</div>
            <input type="text" style="margin: 0 5px;" v-model="formulaWeightMian2">(g)
            <button style="margin-left: 30px;" @click="peisefangan2">计算</button>
          </div>
        </div>
        <div style="font-weight: bold;margin-top: 20px">
            说明:{{ remark2 || '无'}}
          </div>
      </div>

    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
            @click="importTemplate">下载模板</el-link> -->
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCars, getCars, stick, delCars, addCars, updateCars, brand, carShape, colorName, paintShape, blendentShape, blendentShape2 } from "@/api/paint/cars";
import { getToken } from "@/utils/auth";
export default {
  name: "Cars",
  data() {
    return {
      sortData: [
        { label: '全部', value: '' },
        { label: '已收藏', value: 1 },
        { label: '未收藏', value: 2 }
      ],
      stickData: 0,
      memeImageUrl:[],
      dialogImageUrl: '',
      dialogVisible: false,
      baseURL: 'http://tqphone.softhx.net/prod-api',
      // baseURL: 'http://192.168.25.17:9898',
       // 用户导入参数
       upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/paint/cars/new/importExcel"
      },
      // formulaWeightDiHe: 0,
      remark1:'',
      remark2:'',
      hejiOne1:'',
      hejiOne2:'',
      hejiTwo1:'',
      hejiTwo2:'',
      shuju: '增加',
      fangShow: false,
      bottomDetailsOne: [
      ],
      colorSchemeDetails:[],
      surfaceDetailsOne: [],
      bottomDetailsTwo:[],
      surfaceDetailsTwo:[],
      innerVisible: false,
      innerVisibleModel: false,
      innerVisibleColorName: false,
      innerVisiblePaintBrand: false,
      Uid: '',
      dise: [],
      mianse: [],
      dise2: [],
      mianse2: [],
      formulaWeightDi: 100.0,
      formulaWeightMian: 100.0,
      formulaWeightDi2: 100.0,
      formulaWeightMian2: 100.0,

      formulaWeightDiHe: '',
      formulaWeightMianHe: '',
      formulaWeightDi2He: '',
      formulaWeightMian2He: '',

      corslist: [],
      imageUrl: 'https://example.com/path/to/your/image.jpg', // 替换为实际图片URL
      dialogTableVisible: false,
      gridData: [],
      gridData2: [],
      brands: [],

      // 车型数组 示例静态数据
      models: [],
      modelsN: [],

      // 颜色名称数组 示例静态数据
      colors: [],

      // 年款数组 示例静态数据
      years: [],

      // 油漆品牌数组 示例静态数据
      paintBrands: [],
      queryParams: {
        brand: '',
        model: '',
        colorName: '',
        year: '',
        paintBrand: '',
        sort:''
      },
      showSearch: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 汽车信息表格数据
      carsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      pageNum:1,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brand: null,
        model: null,
        colorName: null,
        year: null,
        paintBrand: null,
        imageUrl: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        brand: [
          { required: true, message: "汽车品牌不能为空", trigger: "blur" }
        ],
        model: [
          { required: true, message: "车型不能为空", trigger: "blur" }
        ],
        colorName: [
          { required: true, message: "颜色名称不能为空", trigger: "blur" }
        ],
        year: [
          { required: true, message: "年款不能为空", trigger: "blur" }
        ],
        paintBrand: [
          { required: true, message: "油漆品牌不能为空", trigger: "blur" }
        ],
        year: [
          { required: true, message: "年款不能为空", trigger: "blur" },
          { validator: (rule, value, callback) => {
            if (!value || /^\d+$/.test(value)) {
              callback();
            } else {
              callback(new Error("请输入有效的年款数字"));
            }
          }, trigger: "blur" }
        ],
        weight: [
          { required: true, message: "净重不能为空", trigger: "blur" },
          { validator: (rule, value, callback) => {
            if (!value || /^\d+(\.\d+)?$/.test(value)) {
              callback();
            } else {
              callback(new Error("请输入有效的净重数字"));
            }
          }, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    // 查询汽车信息列表
    this.getList();
    // 汽车品牌下拉框
    this.brandQ();
    //车型下拉框
    this.carShapeList();
    //颜色下拉框
    this.colorNameList();
    //油漆品牌下拉框
    this.paintShapeList();
  },
  onload() {

  },
  watch: {
    bottomDetailsOne: {
      handler(newVal) {
        this.updateCumulativeWeights();
      },
      deep: true,
    },
    surfaceDetailsOne: {
      handler(newVal) {
        this.updatesurfaceDetailsOne();
      },
      deep: true,
    },
    bottomDetailsTwo: {
      handler(newVal) {
        this.updateCumulativeWeightsTwo();
      },
      deep: true,
    },
    surfaceDetailsTwo: {
      handler(newVal) {
        this.updatesurfaceDetailsTwo();
      },
      deep: true,
    },
  },
  methods: {
    xinOngerf(id,currentSort) {
      if(currentSort === 1){
        currentSort = 2
      }else{
        currentSort = 1
      }
      // console.log("currentSort",currentSort)
      const newSort = currentSort === 1 ? 1 : 2;
      stick(id, newSort).then(response => {
        // console.log("responssortsorte",response)
        this.resetQuery()
      });

    },
    stickClick(row){
      console.log(row)
      if(this.stickData === 0){
        this.stickData = 1
      }else{
        this.stickData = 0
      }
      console.log(this.stickData)
      const data = {id: row, sort: this.stickData}
      // stick(data).then(response => {
      //   console.log(response)
      // })
    },
    validateWeight(row) {
    let weight = parseFloat(row.weight);
    if (isNaN(weight) || weight < 0 || !(/^\d+(\.\d{1,2})?$/.test(row.weight))) {
      this.$message.error('请输入非负数，最多保留两位小数！');
      row.weight = ''; // 清除非法输入
    }
    this.updateCumulativeWeights();
    this.updateCumulativeWeightsTwo();
    this.updatesurfaceDetailsOne();
    this.updatesurfaceDetailsTwo();
  },
    submitUpload() {
      this.$refs.upload.submit();
    },

    updatesurfaceDetailsOne() {
      let sum = 0;
      this.surfaceDetailsOne.forEach(item => {
        const weight = parseFloat(item.weight);
        if (!isNaN(weight)) {
          sum += weight;
          // 使用Vue的$set方法确保更改被检测
          this.$set(item, 'cumulativeWeight', sum.toFixed(2));
        } else {
          // 清空累积重量
          this.$set(item, 'cumulativeWeight', '');
        }
      });
      // 更新总计，确保在循环结束后进行
      this.hejiOne2 = sum.toFixed(2);
      // 确保DOM更新后再执行依赖于视图的操作
      this.$nextTick(() => {
        // 这里可以执行依赖于视图更新的操作
      });
    },
    // updateCumulativeWeights() {
    //   let sum = 0;
    //   this.bottomDetailsOne.forEach(item => {
    //     const weight = parseFloat(item.weight);
    //     if (!isNaN(weight)) {
    //       sum += weight;
    //       item.cumulativeWeight = sum.toFixed(2);
    //       this.hejiOne1 = item.cumulativeWeight
    //     } else {
    //       item.cumulativeWeight = '';
    //     }
    //     // console.log('监听到数组变化，更新累积值',this.bottomDetailsOne);
    //   });
    // },
    updateCumulativeWeights() {
      let sum = 0;
      this.bottomDetailsOne.forEach(item => {
        const weight = parseFloat(item.weight);
        if (!isNaN(weight)) {
          sum += weight;
          // 使用Vue的$set方法确保更改被检测
          this.$set(item, 'cumulativeWeight', sum.toFixed(2));
        } else {
          item.cumulativeWeight = '';
          this.$set(item, 'cumulativeWeight', '');
        }
      });
      this.hejiOne1 = sum.toFixed(2);
      // 确保DOM更新后再执行依赖于视图的操作
      this.$nextTick(() => {
        // 这里可以执行依赖于视图更新的操作
      });
    },

    updateCumulativeWeightsTwo() {
      let sum = 0;
      this.bottomDetailsTwo.forEach(item => {
        const weight = parseFloat(item.weight);
        if (!isNaN(weight)) {
          sum += weight;
          this.$set(item, 'cumulativeWeight', sum.toFixed(2));
        } else {
          this.$set(item, 'cumulativeWeight', '');
        }
      });
      this.hejiTwo1 = sum.toFixed(2);
      // 确保DOM更新后再执行依赖于视图的操作
      this.$nextTick(() => {
        // 这里可以执行依赖于视图更新的操作
      });
    },
    // updatesurfaceDetailsTwo() {
    //   let sum = 0;
    //   this.surfaceDetailsTwo.forEach(item => {
    //     const weight = parseFloat(item.weight);
    //     if (!isNaN(weight)) {
    //       sum += weight;
    //       item.cumulativeWeight = sum.toFixed(2);
    //       this.hejiTwo2 = item.cumulativeWeight
    //     } else {
    //       item.cumulativeWeight = '';

    //     }
    //   });
    //   // console.log('监听到数组变化，更新累积值', this.surfaceDetailsOne);
    // },
    updatesurfaceDetailsTwo() {
      let sum = 0;
      this.surfaceDetailsTwo.forEach(item => {
        const weight = parseFloat(item.weight);
        if (!isNaN(weight)) {
          sum += weight;
          // 使用Vue的$set方法确保更改被检测
          this.$set(item, 'cumulativeWeight', sum.toFixed(2));
        } else {
          // 清空累积重量
          this.$set(item, 'cumulativeWeight', '');
        }
      });
      // 更新总计，确保在循环结束后进行
      this.hejiTwo2 = sum.toFixed(2);
      // 确保DOM更新后再执行依赖于视图的操作
      this.$nextTick(() => {
        // 这里可以执行依赖于视图更新的操作
      });
    },
    fanShow() {
      this.fangShow = !this.fangShow
      if (this.fangShow) {
        this.shuju = '收起'
      } else {
        this.shuju = '增加'
      }
    },
    addRow() {
      const newRow = {
        seq: (this.bottomDetailsOne.length + 1).toString(),
        code: '',
        name: '',
        weight: '',
        cumulativeWeight: '',
      };
      this.bottomDetailsOne.push(newRow);
    },
    subRow() {
      this.bottomDetailsOne.pop();
    },
    addCol() {
      const newRow = {
        seq: (this.surfaceDetailsOne.length + 1).toString(),
        code: '',
        name: '',
        weight: '',
        cumulativeWeight: '',
      };
      this.surfaceDetailsOne.push(newRow);
    },
    subCol() {
      this.surfaceDetailsOne.pop();
    },
    addRow1() {
      const newRow = {
        seq: (this.bottomDetailsTwo.length + 1).toString(),
        code: '',
        name: '',
        weight: '',
        cumulativeWeight: '',
      };
      this.bottomDetailsTwo.push(newRow);
    },
    subRow1() {
      this.bottomDetailsTwo.pop();
    },
    addCol1() {
      const newRow = {
        seq: (this.surfaceDetailsTwo.length + 1).toString(),
        code: '',
        name: '',
        weight: '',
        cumulativeWeight: '',
      };
      this.surfaceDetailsTwo.push(newRow);
    },
    subCol1() {
      this.surfaceDetailsTwo.pop();
    },

    peisefangan() {
      // console.log('点击了第一个方案的计算')
      const data = {
        Id: this.Uid,
        baseWeightMultiplier: this.formulaWeightDi,
        surfaceWeightMultiplier: this.formulaWeightMian,
        colorSchemeName: this.gridData.title
      }
      blendentShape(data).then(response => {
        // console.log('重新计算方案一:', response);
        //配色方案一
        this.gridData = response.combinedResult.colorSchemeDetails[1]
        this.dise = this.gridData.bottomDetails
        this.mianse = this.gridData.surfaceDetails
        if (this.dise.length > 0) {
          this.formulaWeightDiHe = this.dise[this.dise.length - 1].cumulative;
        }
        if (this.mianse.length > 0) {
          this.formulaWeightMianHe = this.mianse[this.mianse.length - 1].cumulative;
        }
      });
    },
    peisefangan2() {
      // console.log('点击了第二个方案的计算')
      // console.log('点击了第一个方案的计算')
      const data = {
        Id: this.Uid,
        baseWeightMultiplier: this.formulaWeightDi2,
        surfaceWeightMultiplier: this.formulaWeightMian2,
        colorSchemeName: this.gridData2.title
      }
      blendentShape2(data).then(response => {
        //配色方案二
        this.gridData2 = response.combinedResult.colorSchemeDetails[0]
        this.dise2 = this.gridData2.bottomDetails
        this.mianse2 = this.gridData2.surfaceDetails
        if (this.dise2.length > 0) {
          this.formulaWeightDi2He = this.dise2[this.dise2.length - 1].cumulative;
        }
        if (this.mianse2.length > 0) {
          this.formulaWeightMian2He = this.mianse2[this.mianse2.length - 1].cumulative;
        }
      });
    },
    handleCloseDialog() {
      this.corslist = [];
      this.gridData = [];
      this.dise = [];
      this.mianse = [];
      this.gridData2 = [];
      this.dise2 = [];
      this.mianse2 = [];
      this.formulaWeightDi = 100;
      this.formulaWeightMian = 100;
      this.formulaWeightDi2 = 100;
      this.formulaWeightMian2 = 100;
      this.Uid = '',
        this.formulaWeightDiHe = '',
        this.formulaWeightMianHe = '',
        this.formulaWeightDi2He = '',
        this.formulaWeightMian2He = ''
    },
    //点击弹出框显示详情
    handleDetailsClick(Id) {
      this.Uid = Id
      blendentShape({ Id }).then(response => {
        console.log('返回的数据111:', response);
        this.corslist = response.combinedResult.carInfos[0];
        // const urls = this.corslist.imageUrl.split(','); // 分割字符串
        const urls = this.corslist?.imageUrl?.split(',') || [];
        this.corslist.imageUrl = urls.map(url => `${this.baseURL}${url.trim()}`);
        // console.log('返回的数据:', this.corslist);
        // console.log('返回的数据:', response.combinedResult);

        if (response.combinedResult.colorSchemeDetails.length > 1) {
          //配色方案一
          this.gridData = response.combinedResult.colorSchemeDetails[1]
          this.dise = this.gridData.bottomDetails
          this.mianse = this.gridData.surfaceDetails
          this.remark1 = this.gridData.remark1
          if (this.dise.length > 0) {
            this.formulaWeightDiHe = this.dise[this.dise.length - 1].cumulative;
          }
          if (this.mianse.length > 0) {
            this.formulaWeightMianHe = this.mianse[this.mianse.length - 1].cumulative;
          }
        }
        //配色方案二
        this.gridData2 = response.combinedResult.colorSchemeDetails[0]
        this.dise2 = this.gridData2.bottomDetails
        this.mianse2 = this.gridData2.surfaceDetails
        this.remark2 = this.gridData2.remark1
        if (this.dise2.length > 0) {
          this.formulaWeightDi2He = this.dise2[this.dise2.length - 1].cumulative;
        }
        // console.log('返回的数据方案一:', this.formulaWeightDi2 );
        if (this.mianse2.length > 0) {
          this.formulaWeightMian2He = this.mianse2[this.mianse2.length - 1].cumulative;
        }
        // console.log('返回的数据方案一:', this.gridData);
      });
      this.dialogTableVisible = true;
    },
    // 汽车品牌下拉框
    brandQ() {
      brand().then(response => {
        const arr = Object.entries(response).map(([key, values]) => ({
          label: key,
          options: values.map(value => ({ label: value, value }))
        }));
        this.brands= arr;

        // this.brands = response.rows;
        // console.log('返回的数据:', response);
      });
    },
    //车型下拉框
    carShapeList() {
      carShape({ brand: this.queryParams.brand }).then(response => {
        this.models = response.rows;
      });
    },
    //颜色下拉框
    colorNameList() {
      colorName({ brand: this.queryParams.brand, model: this.queryParams.model}).then(response => {
        this.colors = response.rows;
      });
    },
    //油漆品牌下拉框
    paintShapeList() {
      paintShape().then(response => {
        this.paintBrands = response.rows;
        // console.log('返回的数据:this.paintBrands', this.paintBrands);
      });
    },
    /** 查询汽车信息列表 */
    getList() {
      this.loading = true;
      // console.log('this.queryParams:', this.queryParams);
      // console.log('this.pageNum:', this.pageNum);
      this.queryParams.pageNum = this.pageNum
      listCars(this.queryParams).then(response => {
        this.carsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {

      this.form = {
        // id: null,
        brand: null,
        model: null,
        colorName: null,
        year: null,
        paintBrand: null,
        originalColorCode: null,
        imageUrl: null,
        remark: null,
        // delFlag: null,
        // createBy: null,
        // createTime: null,
        // updateBy: null,
        // updateTime: null,
      };
      this.colorSchemeDetails = [],
      this.bottomDetailsOne = [],
      this.surfaceDetailsOne = [],
      this.remark1 = '',
      this.remark2 = '',
      this.bottomDetailsTwo = [],
      this.surfaceDetailsTwo = [],
        this.shuju = '增加'
      this.fangShow = false
      this.memeImageUrl = []





      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery(e) {
      this.queryParams.pageNum =  this.pageNum;
      this.getList();
    },
    handleQueryy() {
      this.queryParams.pageNum =  this.pageNum;
      this.queryParams.paintBrand = '';
      this.queryParams.colorName = '';
      this.queryParams.model = '';
      this.queryParams.sort = '';
      this.colors = []
      this.carShapeList()
      this.getList();
    },
    handleQueryzz(){
      this.queryParams.pageNum =  this.pageNum;
      this.queryParams.paintBrand = '';
      this.queryParams.colorName = '';
      this.colorNameList()
      this.getList();
    },
    handleQuerycc(){
      this.queryParams.pageNum =  this.pageNum;
      this.queryParams.paintBrand = '';
      this.getList();
    },
    handleQueryNei() {
      this.form.colorName = ''
      this.form.model = ''
      this.colors = []
      this.carShapeListNei()
    },
    //车型下拉框
    carShapeListNei() {
      carShape({ brand: this.form.brand }).then(response => {
        this.modelsN = response.rows;
      });
      this.form.colorName = ''
      this.colorNameList()
    },

    //颜色下拉框
    handlColorNei() {
      // console.log('123215674489');
      colorName({ brand: this.form.brand, model: this.form.model}).then(response => {
        this.colors = response.rows;
        // console.log('123215674489',response);
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      // console.log("this.queryParams.sort",)
      this.queryParams.sort = '';
      this.models = []
      this.colors = []
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resetQueryTwo(){
      this.pageNum = 1;
      this.queryParams.pageNum =  this.pageNum;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加汽车信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      // getCars(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改汽车信息";
      // });
      blendentShape({ id:id }).then(response => {
        this.form = response.combinedResult.carInfos[0];
        const urls = this.form.imageUrl?.split(',') || [];
        // console.log('返回的数据:', urls);
        this.memeImageUrl = urls.map(url => `${this.baseURL}${url.trim()}`);

        // console.log("666");
        this.open = true;
        this.title = "修改汽车信息";
        response.combinedResult.colorSchemeDetails.forEach(item => {
          if (item.title === '配色方案一') {
            // 执行针对'配色方案一'的操作
            this.bottomDetailsOne = item.bottomDetails
            console.log(' rthis.bottomDetailsOne', this.bottomDetailsOne)
            this.hejiOne1 = item.bottomTotal
            this.surfaceDetailsOne = item.surfaceDetails
            this.hejiOne2 = item.surfaceTotal
            this.remark1 = item.remark1
            // console.log(' response.combinedResult.colorSchemeDetails',item)
          } else if (item.title === '配色方案二') {
            // 执行针对'配色方案二'的操作，或者直接进行下一个迭代
            this.bottomDetailsTwo = item.bottomDetails
            this.hejiTwo1 = item.bottomTotal
            this.surfaceDetailsTwo = item.surfaceDetails
            this.hejiTwo2 = item.surfaceTotal
            this.remark2 = item.remark1
            this.shuju = '收起'
            this.fangShow = true
            // console.log(' response.combinedResult.colorSchemeDetails', response.combinedResult.colorSchemeDetails)
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log('this.memeImageUrl',this.memeImageUrl)
        console.log('memeImageUrl is a string',);

      // 将逗号分隔的字符串转换为数组
      const memeImageUrlArray = Array.isArray(this.memeImageUrl) ? this.memeImageUrl : this.memeImageUrl.split(',');



      console.log('this.1212',memeImageUrlArray)
      const processedUrls = memeImageUrlArray.map(url => {
        // // 检查URL是否包含特定的前缀
        // if (url.startsWith('http://192.168.25.17:8080')) {
        //   // 去除特定的前缀
        //   return url.replace('http://192.168.25.17:8080', '');
        // } else {
        //   // 如果不包含前缀，则直接返回原URL
        //   return url;
        // }
         // 检查URL是否包含特定的前缀
        // if (url.startsWith('http://localhost:9898')) {
        if (url.startsWith('http://tq.softhx.net/prod-api')) {
          // 去除特定的前缀
          // return url.replace('http://localhost:9898', '');
          return url.replace('http://tq.softhx.net/prod-api', '');
        } else {
          // 如果不包含前缀，则直接返回原URL
          return url;
        }
      });

      // 将处理后的 URL 数组合并成一个字符串，元素间以逗号分隔
      this.form.imageUrl = processedUrls.join(',');
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            const schemeOne = {
              title: "配色方案二",
              surfaceTotal: this.hejiTwo2,
              surfaceDetails: this.surfaceDetailsTwo,
              bottomTotal: this.hejiTwo1,
              bottomDetails: this.bottomDetailsTwo,
              remark1: this.remark2
            };
            // 定义第二个对象
            const schemeTwo = {
              title: "配色方案一",
              surfaceTotal: this.hejiOne2,
              surfaceDetails: this.surfaceDetailsOne,
              bottomTotal: this.hejiOne1,
              remark1:this.remark1,
              bottomDetails: this.bottomDetailsOne
            };
            // 使用push方法添加对象到colorSchemeDetails数组
            this.colorSchemeDetails.push(schemeTwo);
            console.log('this.colorSchemeDetails', this.colorSchemeDetails)
            if(schemeOne){
              this.colorSchemeDetails.push(schemeOne);
            }

            console.log('this.colorSchemeDetails', this.colorSchemeDetails)
            updateCars({carInfo:this.form,colorSchemeDetails:this.colorSchemeDetails}).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
            // this.open = false;
          } else {
            // console.log('this.surfaceDetailsOne', this.surfaceDetailsOne)
            // console.log('this.form', this.form)
            // console.log('this.bottomDetailsOne', this.bottomDetailsOne)
            const carInfo = this.form
            // addCars(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
            const schemeOne = {
              title: "配色方案二",
              surfaceTotal: this.hejiTwo2,
              surfaceDetails: this.surfaceDetailsTwo,
              bottomTotal: this.hejiTwo1,
              bottomDetails: this.bottomDetailsTwo,
              remark1: this.remark2
            };
            // 定义第二个对象
            const schemeTwo = {
              title: "配色方案一",
              surfaceTotal: this.hejiOne2,
              surfaceDetails: this.surfaceDetailsOne,
              bottomTotal: this.hejiOne1,
              remark1:this.remark1,
              bottomDetails: this.bottomDetailsOne
            };
            // 使用push方法添加对象到colorSchemeDetails数组
            this.colorSchemeDetails.push(schemeTwo);
            console.log('this.colorSchemeDetails', this.colorSchemeDetails)
            if(schemeOne){
              this.colorSchemeDetails.push(schemeOne);
            }

            console.log('this.colorSchemeDetails', this.colorSchemeDetails)
            addCars({carInfo:this.form,colorSchemeDetails:this.colorSchemeDetails}).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });

          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除汽车信息编号为"' + ids + '"的数据项？').then(function () {
        return delCars(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExportJiBen() {
      this.download('paint/cars/export', {
        ...this.queryParams
      }, `cars_${new Date().getTime()}.xlsx`)
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('paint/cxcar/export', {
        ...this.queryParams
      }, `cxcar_${new Date().getTime()}.xlsx`)
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('system/user/importTemplate', {
      }, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style>
/*模态框主体样式*/
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/*模态框公共样式*/
.modal-content {
  background-color: #fefefe;
  margin: 50px auto 0;
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  animation: modal-show 0.3s;
}

/* 正常大小 */
.modal-normal {
  width: 600px;
}

/* 中等大小 */
.modal-medium {
  width: 400px;
}

/* 迷你大小 */
.modal-mini {
  width: 250px;
}

/* 隐藏 */
.modal-hide {
  animation: modal-hide 0.3s;
}

/* 展示动画 */
@keyframes modal-show {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 隐藏动画 */
@keyframes modal-hide {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

/*关闭按钮*/
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

.table-container {
  position: relative;
  margin-top: 40px;
}


.custom-header {
  display: flex;
  justify-content: space-between;
  background-color: #f2ba60;
  padding: 5px 10px;
  width: 100%;
}

.custom-header2 {
  display: flex;
  justify-content: space-between;
  background-color: #60daf2;
  padding: 5px 10px;
  width: 100%;
}

.el-table__header-wrapper {
  margin-top: -0px;
}

.header-item {
  text-align: center;
  height: 30px;
  font-weight: bold;
}
</style>
